<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css?version=1" />
	<title></title>
	<style>
		.search-content {
			width: 56%;
		}
		.row-list {
			margin-top: 20px;
		}
		.row-list .thumbnail {
			padding: 8px;
			border: none;
			background: url(../../img/myExtension/content-back.png) no-repeat;
			background-size: 100% 100%;
		}
		.img-layer {
			position: relative;
		}
		.img-layer .main-img {
			height: 166px;
			width: 100%;
			display: block;
		}
		.float-btn {
			margin-top: 30px;
			text-align: center;
		}
		.float-btn button {
			width: 158px;
		    background-color: #11B5AB;
		    color: #fff;
		    border-color: #11B5AB;
		}
		.float-btn p button:nth-child(2) {
			margin-left: 10px;
		}
		.float-btn button:focus, .float-btn button:hover {
			color: #fff;
			background-color: #2aeee2;
		}
		.float-btn .btn-default[disabled]:hover {
			color: #fff;
			background-color: #2aeee2;
		}
		.float-bottom {
			position: absolute;
			left: 0;
			bottom: 10px;
			width: 100%;
			color: #fff;
		}
		.float-bottom .delete {
			float: left;
			margin-left: 20px;
			cursor: pointer;
		}
		.float-bottom .edite {
			float: right;
			margin-right: 20px;
			cursor: pointer;
		}
		.float-bottom img {
			margin-right: 8px;
			vertical-align: middle;
		}
		.float-bottom span {
			vertical-align: middle;
		}
		.row-list .caption {
			position: relative;
		}
		.icon-bar {
			height: 20px;
		}
		.icon-bar img {
			width: 14px;
			height: 14px;
			margin-right: 5px;
		}
		.push-time {
			color: #8B8B8B;
		}
		.read-share {
			margin-top: 5px;
			color: #8B8B8B;
		}
		.read-share img {
			width: 20px;
			margin-right: 8px;
			vertical-align: middle;
		}
		.read-share span {
			vertical-align: middle;
		}
		.read-share img:nth-child(3) {
			margin-left: 25px;
		}
		.read-share img:nth-child(5) {
			margin-left: 25px;
		}
		.content-source {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
		}
		.content-source.quote {
			background: url(../../img/myExtension/content-quote.png) no-repeat;
			background-size: 100% 100%;
		}
		.content-source.original {
			background: url(../../img/myExtension/content-original.png) center;
			background-size: 100% 100%;
		}
		.no-content-prompt {
			margin-top: 50px;
			text-align: center;
			color: #666666;
		}
		/*-----对比框-----*/
		.compare-div {
			min-height: 600px;
			/*position: absolute;
			right: 0px;
			top: 0px;*/
		}
		.compare-title {
			background-color: #09262B;
			height: 60px;
			text-align: center;
			line-height: 55px;
			color: #FFFFFF;
			font-size: 16px;
		}
		.compare-info-container {
			background-color: #FFFFFF;
			padding: 10px;
			border: 1px solid #A1A1A1;
			border-top: 0px;
		}
		.compare-ul {
			margin-bottom: 0px;
			padding-left: 0px;
			list-style:none; 
			border: 1px solid #A1A1A1;
			background-color: #f3f3f3;
		}
		.compare-ul li {
			position: relative;
			padding: 15px 0px 15px 10px;
			border-bottom: 1px;
		    border-top: 0px;
		    border-left: 0px;
		    border-right: 0px;
			border-style: solid;
			border-color: #A1A1A1;
		}
		.compare-ul li:nth-of-type(odd) {
		    background-color: #e7e7e7;
		}
		.compare-ul li:last-child {
			border-bottom: 0px;
		}
		.text-ellipsis {
			margin-right: 35px;
		}
		.compare-del-img {
			width: 15px;
			height: 15px;
			position: absolute;
			right: 15px;
			top: 17px;
		}
		.compare-btn-info {
			position: relative;
			background-color: #FFFFFF;
		}
		.btn-primary:focus, .btn-primary:hover {
			color: #fff;
			background-color: #2aeee2;
			border-color: #2aeee2;
		}
		.btn-primary {
		    color: #fff;
		    background-color: #11B5AB;
		    border-color: #11B5AB;
		}
		.compare-tips {
			color: #999;
			font-size: 12px;
			margin-left: 10px;
		}
		.compare-btn-info a {
			position: absolute;
			right: 8px;
			top: 8px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="col-lg-9">
			<div class="search-button">
				<div class="search-content">
					<input id="searchInput" type="search" class="form-control" placeholder="输入文章标题">
				</div>
			</div>
			<div class="label-content">
				<div class="label-group">
					<label>标签：</label>
					<span class="label label-default active unlimited">不限</span>
				</div>
				<div class="more-label">
					<a href="javascript:void(0)">更多标签</a>
					<img src="../../img/myExtension/more-down.png" />
				</div>
			</div>
			<div class="sort-key">
				<label>排序：</label>
				<span class="label active" data-param="1">最新内容</span>
				<span class="label" data-param="2">点赞次数</span>
				<span class="label" data-param="3">阅读次数</span>
				<span class="label" data-param="4">转发次数</span>
			</div>
			<div class="row row-list">
			</div>
			<nav id="page" class="text-center" aria-label="Page navigation">
				<ul class="pagination">
				</ul>
			</nav>
		</div>
		<div class="col-lg-3 compare-div">
			<div class="compare-title">对比</div>
			<ul class="compare-ul">
				<!--<li>
					<div class="compare-btn-info">
						<button type="button" id="startCompare" class="btn btn-primary btn-width" >开始对比</button>
						<span class="compare-tips">最多十篇</span>
						<a href="javascript:void(0)">清空</a>
					</div>
				</li>-->
			</ul>
			<div class="compare-info-container">
				<div class="compare-btn-info">
					<button type="button" id="startCompare" class="btn btn-primary btn-width" >开始分析</button>
					<span class="compare-tips">最多十篇</span>
					<a href="javascript:void(0)">清空</a>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/page.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js?version=1" ></script>
	<script>
		var userID,companyID,isPublish=1,lableID,title,order=1,roleType,PageNum=1;
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			roleType = $.cookie("roleType");
			toastr.options = {
                "timeOut": 2000,
                "positionClass": "toast-middle-center"
            };
			initGetTweets();
			getArticleAnalyseInfo();
			//获取个人标签
			base.postData(base.url.getMyLableList, {userID:userID,companyID:companyID,type:1}, callbackGetMyLableList);
		});
		//获取选中文章列表
		function getArticleAnalyseInfo() {
			base.postData(base.url.getArticleAnalyseInfo, {userID:userID,companyID:companyID}, callbackGetArticleAnalyseInfo);
		}
		function initGetTweets(){
			//获取推文内容
			var data = {
				userID:userID,
				companyID:companyID,
				isPublish:isPublish,
				title:title,
				lableID:lableID,
				order:order,
				roleType:roleType,
				pageNo:PageNum,
				pageSize:6
			}
			base.postData(base.url.getTweetsAnalyseContent, data, callbackGetTweets);
		};
		//推文返回
		function callbackGetTweets(data) {
			if (data.success) {
				var html = '';
				for (var i=0; i<data.context.articleList.length; i++) {
					html += pingTweetsContent(data.context.articleList[i]);
				}
				$(".row-list").html(html);
				if (PageNum == 1){
					//初始化分页
					var totalPage = Math.ceil(data.context.totalPage/6);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage,//总页数
						onPageClick: function(page) {
							$("#page").initPage(page);
							PageNum = page.currentPage;
							initGetTweets();
			    			return false;  //默认的翻页事件
					    }
					};
					$("#page").initPage(page);
				}
			}else {
				var html = '<div class="no-content-prompt">您还没有推文信息哦！<a href="javascript:void();" onclick="goCreateCentent();">去原创吧</a></div>';
				$(".row-list").html(html);
			}
		}
		function pingTweetsContent(data) {
			var html = '<div class="col-sm-6 col-lg-4">'+
						'	<div class="thumbnail">'+
						'		<input type="hidden" name="articleID" value="'+data.articleID+'" />'+
						'		<input type="hidden" name="category" value="'+data.category+'" />'+
						'		<div class="img-layer">'+
						'			<img class="main-img" src="'+data.articleImage+'" alt="...">'+
						'			<div class="floating-layer '+(data.select == 1 && "active")+'" style="opacity: '+(data.select == 1?'1':'0')+'">'+
						'				<div class="float-btn" style="margin-top:60px;">'+
						'					<p><button class="btn btn-default contrast" type="button" '+(data.select == 1 && 'disabled="disabled"')+'>'+(data.select == 1?"已添加":"添加分析")+'</button></p>'+
						'				</div>'+
						'			</div>'+
						'		</div>'+
						'		<div class="caption">'+
						'			<div class="icon-bar">';
						if (data.isRedPackage == 1) {
				html += '				<img src="../../img/myExtension/content-hongbao.png" />';		
						}
						if (data.isEnroll == 1) {
				html += '				<img src="../../img/myExtension/content-enroll.png" />';			
						}
						if (data.isVoucher == 1) {
				html += '				<img src="../../img/myExtension/content-coupon.png" />';			
						}
						if (data.isOrder == 1) {
				html += '				<img src="../../img/myExtension/content-order.png" />';			
						}
				html += '			</div>';
				        if (data.isQuote == 1) {
				html += '			<div class="content-source quote"></div>';
						}else{
				html += '			<div class="content-source original"></div>';
						}
				html += '			<div class="text-title text-ellipsis">'+data.articleTitle+'</div>'+
						'			<div class="push-time">最新时间：'+data.alterTime+'</div>'+
						'			<div class="read-share">'+
						'				<img src="../../img/myExtension/content-read.png" /><span>'+data.readNum+'</span><img src="../../img/myExtension/content-share.png" /><span>'+data.transmitNum+'</span><img src="../../img/myExtension/content-praise.png" /><span>'+data.likeNum+'</span>'+
						'			</div>'+
						'		</div>'+
						'	</div>'+
						'</div>';
			return html;			
		}
		//标签返回
		function callbackGetMyLableList(data) {
			if (data.success) {
				var lableList = data.context.lableList;
				var html = '<label>标签：</label>'+
						   '<span class="label label-default active unlimited" data-param="">不限</span>';
				for (var i=0; i<lableList.length; i++) {
					html += '<span class="label label-default" data-param="'+lableList[i].id+'">'+lableList[i].lableName+'</span>';
				}
				$(".label-group").html(html);
			}
		}
		function callbackGetArticleAnalyseInfo(data) {
			if (data.success) {
				var articleAnalyseList = data.context.articleAnalyseList;
				var html = '';
				for (var i=0; i<articleAnalyseList.length; i++) {
					html += '<li>';
					html += '	<div class="text-ellipsis" data-articleID="'+articleAnalyseList[i].articleId+'">'+articleAnalyseList[i].articleTitle+'</div>';
					html += '	<img class="compare-del-img" src="../../img/myCenter/delete_icon.png" />';
					html += '</li>';
				}
				$(".compare-ul").html(html);
			}
		}
		//点击发布按钮
		$(".publish-button").on("click", "button", function(){
			if ($(this).attr("class").indexOf("active") != -1) {
				return;
			}
			$(".publish-button button").removeClass("active");
			$(this).addClass("active");
			isPublish = $(this).attr("data-param");
			//获取推文内容
			PageNum=1;
			initGetTweets();
		});
		//搜索
		$('#searchInput').bind('keyup', function(event) {
			if (event.keyCode == "13") {
		　　　　//回车执行查询
				$(this).blur();
				title = $(this).val();
				PageNum=1;
				initGetTweets();
		　　	}
		});
		//点击标签
		$(".label-group").on("click", "span", function(){
			//正反选
			if ($(this).attr("class").indexOf("active") != -1) {
				$(this).removeClass("active");
			}else{
				$(this).addClass("active");
			}
			//不限和其他标签互换
			if ($(this).attr("class").indexOf("unlimited") == -1) {
				$(".unlimited").removeClass("active");
				lableID = "";
				var len = $(".label-group").find("span.active").length;
				$(".label-group").find("span.active").each(function(i){
					if (i == len - 1) {
						lableID += $(this).attr("data-param");
					}else{
						lableID += $(this).attr("data-param") + ",";	
					}
				});
				PageNum=1;
				initGetTweets();
			}else {
				$(this).siblings().removeClass("active");
				lableID = "";
				if ($(this).attr("class").indexOf("active") != -1) {
					PageNum=1;
					initGetTweets();
				}
			}
		});
		//更多标签
		$(".more-label").click(function(){
			if ($(this).find("img").attr("src").indexOf("more-down") != -1) {
				$(this).find("img").attr("src", "../../img/myExtension/more-up.png");
				$(".label-group").css("width", "1200px");
				$(".label-group").css("height", "auto");
			}else{
				$(this).find("img").attr("src", "../../img/myExtension/more-down.png");
				$(".label-group").css("width", "800px");
				$(".label-group").css("height", "29px");
			}
		});
		//点击排序
		$(".sort-key").on("click", "span", function(){
			if ($(this).attr("class").indexOf("active") != -1) {
				return;
			}	
			$(".sort-key span").removeClass("active");
			$(this).addClass("active");
			order = $(this).attr("data-param");
			PageNum=1;
			initGetTweets();
		});
		
		//鼠标悬浮
		$(".row-list").on("mouseover mouseout", ".thumbnail", function(event){
			if ($(this).find(".floating-layer").attr("class").indexOf("active") != -1) {
				return;
			}
			if(event.type == "mouseover"){
				//鼠标悬浮
				$(this).find(".floating-layer").css("opacity", "1");
			}else if(event.type == "mouseout"){
				//鼠标离开
				$(this).find(".floating-layer").css("opacity", "0");
			}
		});
		//点击对比
		$(".row-list").on("click", ".contrast", function() {
			var articleID = $(this).closest(".thumbnail").find("input[name='articleID']").val();
			var element = $(this);
			base.postData(base.url.addArticleAnalyseInfo, {userID:userID,companyID:companyID,articleID:articleID}, callbackAddArticleAnalyseInfo.bind(null, element));
		});
		function callbackAddArticleAnalyseInfo(element, data) {
			if (data.success) {//加入对比成功后改变样式
				getArticleAnalyseInfo();
				element.closest(".floating-layer").addClass("active");
				element.attr("disabled","disabled").html("已添加");
				toastr.success(data.msg);
			} else {
				toastr.error(data.msg);
			}
		}
		//点击清空对比的文章
		$(".compare-info-container").on("click", "a", function() {
			var _articleIDGroup = "";
			$(".compare-ul").find("li").each(function() { //循环文章列表里的数据
		        var articleID = $(this).find(".text-ellipsis").attr("data-articleID");
		        if (articleID != null) {
			        	_articleIDGroup += articleID;
			        _articleIDGroup += ",";
		        }
	      	});
	      	_articleIDGroup = _articleIDGroup.substring(0, _articleIDGroup.length-1);
			base.postData(base.url.delArticleAnalyseInfo, {userID:userID,companyID:companyID,articleID:_articleIDGroup}, callbackDelArticleAnalyseInfo.bind(null, 1, null));
		})
		//点击删除对比的文章
		$(".compare-ul").on("click", ".compare-del-img", function() {
			var articleID = $(this).closest("li").find(".text-ellipsis").attr("data-articleID");
			var element = $(this);
			base.postData(base.url.delArticleAnalyseInfo, {userID:userID,companyID:companyID,articleID:articleID}, callbackDelArticleAnalyseInfo.bind(null, 2, element));
		})
		function callbackDelArticleAnalyseInfo(type, element, data) {
			if (data.success) {
				if (type == 1) {
					$(".compare-ul").find("li").each(function() { //循环文章列表里的数据
						var articleID = $(this).find(".text-ellipsis").attr("data-articleID");
						if (articleID != null) {
							$(this).remove();
						}
			      	});
					toastr.success("清空文章列表成功");
				} else {
					element.closest("li").remove();
					toastr.success("删除文章成功");
				}
				initGetTweets();//删除文章对比成功后刷新推文列表数据
			} else {
				toastr.error(data.msg);
			}
		}
		//跳转去原创页面
		function goCreateCentent(){
			$(".top-tab li", parent.document).removeClass("active");
			$(".top-tab li", parent.document).each(function(){
				if ($(this).find("a").attr("data-href") == "myExtension/createContent.html") {
					$(this).addClass("active");
					var path = $(this).find("a").attr("data-href");
					$.cookie("menuUrl", path, {path:"/"});
					history.pushState(null, null, "index.html");
				}
			});
			parent.window.initIframe("myExtension/createContent.html");
		}
		$(".compare-btn-info").on("click", "#startCompare", function() {
			var _articleIDGroup = "";
			var totalNum = 0;
			$(".compare-ul").find("li").each(function() { //循环文章列表里的数据
				totalNum++;
		        var articleID = $(this).find(".text-ellipsis").attr("data-articleID");
		        if (articleID != null) {
			        	_articleIDGroup += articleID;
			        _articleIDGroup += ",";
		        }
	      	});
	      	_articleIDGroup = _articleIDGroup.substring(0, _articleIDGroup.length-1);
	      	if (totalNum > 1) {
	      		window.parent.location = "../index.html?path=myExtension/deepAnalysisDetail.html?articleID="+_articleIDGroup; 
	      	} else {
	      		toastr.warning("最少两篇文章才能对比");
	      	}
		})
	</script>
</body>
</html>
